import React from 'react';
import {
    ActivityIndicator,
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList, TouchableOpacity, DeviceEventEmitter
} from 'react-native';

//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import Styles from './Styles';
import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";
const { width, height } = Dimensions.get('window')

import { createBottomTabNavigator } from 'react-navigation-tabs';



export default class OLists extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
            loaded: true,
            refreshing: false,
        };
        this.gid = 0;
        this.type = 0;
        this.orderState = -1;
    }
    static navigationOptions = {
        //title: '彩票咨询',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#ff0000',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            //fontWeight: 'bold',
        },
    }
    componentDidMount() {
        let type = 0;
        switch (this.props.tabLabel) {
            case '购买':
                type = 1;
                break;
            case '跟单':
                type = 2;
                break;
        }
        this.type = type;
        this.gid = this.props.gid;
        this.orderState = this.props.orderState;
        this.days = this.props.days;

        this.getServerData(() => { });
        this.listener = DeviceEventEmitter.addListener('updateOLists', (value) => {
            //这里面是要调用的方法，比如：刷新
            //value:是下面页面在 通知 时 ，所传递过来的参数
            this.gid = value.gid;
            this.orderState = value.orderState;
            this.days = value.days;
            this.setState({
                page: 0,
                rows: 10,
                total: 0,
                totalpage: 1,
                lists: [],
            }, () => {
                this.getServerData(() => { });
            });

        });
    }
    getServerData(callback) {
        let _this = this;
        let params = {};
        let { page, rows, lists } = this.state;
        params.rootid = app.rootid;
        params.token = Ugame.info.Token;
        params.gid = this.gid;
        params.type = this.type;
        params.state = this.orderState;
        params.days = this.days;
        params.page = page + 1;
        params.rows = rows;
        Httpc.get(REQUEST.GetUserGameOrder, params, (res) => {
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }
            if (res.StatusCode == 1) {
                if (res.Data.rows.length > 0) {
                    this.setState({
                        page: page + 1,
                        total: res.Data.total,
                        totalpage: res.Data.totalpage,
                        lists: lists.concat(res.Data.rows),
                    });
                }
            }

            callback();
        })
    }
    _on_newsDeatiled = (GameId, id) => {
        let path = 'OrderDetail';
        switch (Ugame.gmlist[GameId].Model) {
            case "FootballGame":
                path = 'OrderDetail';
                break;
            case "DLTGame":
                path = 'DLTOrderDetail';
                break;
        }
        this.props.navigation.navigate(path, {
            id: id
        });
    }
    _createNewsItem = ({ item }) => {
        //0,未接单，1已接单，未打票 2已打票（通过IsTake 代表已经取票），3已撤单，4未中奖 5已中奖 6已拍奖
        return (
            <TouchableOpacity onPress={() => this._on_newsDeatiled(item.GameId, item.id)}>
                <View style={{ height: 60, padding: 12 }} >
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Text>{item.Title}</Text>
                        <Text style={{ fontSize: 12, color: '#666' }}>{item.Ctime.substr(0, 19)}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Text style={{ fontSize: 12, color: '#666' }}>{item.Coin}元</Text>
                        {item.State == 0 ? <Text style={{ fontSize: 10, color: '#666666' }}>未接单</Text> : null}
                        {item.State == 1 ? <Text style={{ fontSize: 10, color: '#666666' }}>出票中</Text> : null}
                        {item.State == 2 ? <Text style={{ fontSize: 10, color: '#666666' }}>开奖中</Text> : null}
                        {item.State == 3 ? <Text style={{ fontSize: 10, color: '#666666' }}>已撤单</Text> : null}
                        {item.State == 4 ? <Text style={{ fontSize: 10, color: '#666666' }}>未中奖</Text> : null}
                        {item.State == 5 ?
                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: '#666666' }}>奖金:</Text>
                                <Text style={{ fontSize: 12, color: '#d0162e' }}>{item.SCoin}</Text>
                                <Text style={{ fontSize: 12, color: '#666666' }}>元</Text>
                                <Text style={{ fontSize: 8, color: '#336699', marginLeft: 5, paddingLeft: 5, paddingRight: 5, borderColor: '#336699', borderWidth: 0.5, padding: 1, borderTopRightRadius: 10, borderBottomRightRadius: 10, borderBottomLeftRadius: 10 }}>已中奖</Text>
                            </View> : null
                        }
                        {item.State == 6 ?
                            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                                <Text style={{ fontSize: 12, color: '#666666' }}>奖金:</Text>
                                <Text style={{ fontSize: 12, color: '#d0162e' }}>{item.SCoin}</Text>
                                <Text style={{ fontSize: 12, color: '#666666' }}>元</Text>
                                <Text style={{ fontSize: 8, color: '#336699', marginLeft: 5, paddingLeft: 5, paddingRight: 5, borderColor: '#336699', borderWidth: 0.5, padding: 1, borderTopRightRadius: 10, borderBottomRightRadius: 10, borderBottomLeftRadius: 10 }}>已派奖</Text>
                            </View> : null
                        }
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
    _onRefresh = () => {
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        params.rootid = app.rootid;
        params.token = Ugame.info.Token;
        params.gid = this.gid;
        params.type = this.type;
        params.state = this.orderState;
        params.days = this.days;
        params.page = 1;
        params.rows = this.state.rows;
        Httpc.get(REQUEST.GetUserGameOrder, params, (res) => {
            _this.setState({ refreshing: false });
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }
            if (res.StatusCode == 1) {
                _this.setState({
                    page: 1,
                    total: res.Data.total,
                    totalpage: res.Data.totalpage,
                    lists: res.Data.rows
                });
            }
        })
    }
    _onEndReached() {
        if (this.state.page < this.state.totalpage) {
            this.getServerData(() => { });
        }

    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    render() {
        let { lists } = this.state;
        if (lists.length == 0) {
            return (
                <View></View>
            );
        }
        return (
            <View style={Styles.container}>
                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={0.1}
                    ItemSeparatorComponent={this._separator}
                />

            </View>
        )
    }



}
